<template>
  <div>
    <!-- 
      ref 被用来给元素或子组件注册引用信息。
      引用信息将会注册在父组件的 $refs 对象上。
      1. 如果设置给元素上,则我们获取的是当前元素的真实DOM

     -->
    <input type="text" ref="ipt" />
    <button @click="showMessage">获取输入框的内容</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    showMessage() {
      console.log(this);
      console.log(this.$refs.ipt.value);
    },
  },
};
</script>

<style></style>
